<template>
  <el-col
    class="element-rect"
    @dblclick.stop.native="propEdit()"
    :span="span"
    :offset="offset"
    :push="push"
    :pull="pull"
    :xs="xs"
    :sm="sm"
    :md="md"
    :lg="lg"
    :xl="xl"
    :tag="tag"
  >
    <draggable
      class="list-group"
      :value="items"
      @input="
        (val) => {
          $emit('propChange', 'items', val);
        }
      "
      group="controlGroup"
    >
      <q-element :key="item.uuid" v-for="item in items" :schema="item" />
    </draggable>
  </el-col>
</template>
<script>
export default {
  name: "QCol",
  props: {
    span: {
      type: Number,
      default: () => 24,
    },
    offset: {
      type: Number,
      default: () => 0,
    },
    push: {
      type: Number,
      default: () => 0,
    },
    pull: {
      type: Number,
      default: () => 0,
    },
    xs: {
      type: Number,
      default: () => {},
    },
    sm: {
      type: Number,
      default: () => {},
    },
    md: {
      type: Number,
      default: () => {},
    },
    lg: {
      type: Number,
      default: () => {},
    },
    xl: {
      type: Number,
      default: () => {},
    },
    tag: {
      type: String,
      default: () => "div",
    },
    //特殊
    items: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    propEdit() {
      console.log(this.$attrs.uuid, "propEdit");
      this.$store.dispatch("prop/editProps", {
        uuid: this.$attrs.uuid,
      });
    },
  },
};
</script>
